import React, { useState, useEffect } from 'react'
import { PageHeader, Pagination, Tag, Button, Modal, List, message, Space } from 'antd';
import style from "./index.module.css"
import {
    PlusOutlined,
    ExclamationCircleOutlined
} from '@ant-design/icons';
import { get } from '../../util/get'
import { post } from "../../util/post"
import EditAddressModal from '../../components/EditAddressModal';
import AddAddressModal from '../../components/AddAddressModal';
import PubSub from 'pubsub-js'
import { useNavigate,useLocation } from 'react-router-dom';
const { confirm } = Modal;
export default function Address() {
    const [list, setList] = useState([])
    const [total, setTotal] = useState(0)
    const [page, setPage] = useState(1)
    const [v, setV] = useState(false)
    const [addv,setAddV] = useState(false)
    const location = useLocation()
    const data = location.state
    const token = localStorage.getItem('TOKEN')
    const navigate = useNavigate()
    const getAddress= ()=>{
        get(`/user/address/list?page=${page}`, token).then(res => {
            if (res.data.code === 0) {
                setList(res.data.page.list)
                setTotal(res.data.page.totalCount)
                setPage(res.data.page.currPage)
            } else message.error(res.data.msg)
        })
        console.log('有没有state',data)
    }
    useEffect(() => {
        if(!v||!addv)
            getAddress()
    }, [page, token,v,addv])
    const handleEdit = (data) => {
        PubSub.publish('editAddressData', data)
        setV(true)
    }
    const showConfirm = (id) => {
        // console.log(id)
        const data =[id]
        confirm({
          title: '你想删除这条地址吗？',
          icon: <ExclamationCircleOutlined />,
          onOk() {
            console.log('OK');
            post('/user/address/delete',data,token).then(res=>{
                const {code,msg}=res.data
                if(code===0) {
                    message.success(msg)
                    getAddress()
                }
                else message.error(msg)
            })
          },
        });
      };
    return (
        <div>
            <PageHeader
                className={`site-page-header ${style.header}`}
                onBack={()=>navigate(-1)}
                title={'地址管理'}
                subTitle={`共${total}条地址`}
            />
            <div className={style.address_c}>
                <Button className={style.add_button} type="primary" shape="round" onClick={()=>{setAddV(true)}} icon={<PlusOutlined />} size={'large'}>
                    增加地址
                </Button>
                <List
                    className={style.addresslist}
                    itemLayout="horizontal"
                    bordered
                    dataSource={list}
                    renderItem={(item) => {
                        const { name, phone, address, id, userId, cdefault } = item
                        return (
                            <List.Item key={id}
                                actions={[<a onClick={() => { handleEdit(item) }} key="list-loadmore-edit">编辑</a>, <a key="list-loadmore-more" onClick={()=>showConfirm(id)}>删除</a>]}
                            >
                                <List.Item.Meta
                                    title={<div className={style.info}><span>{name}</span><span>{phone}</span></div>}
                                    description={address}
                                />
                                <div>{cdefault ? <Tag color="#62e928">使用中</Tag>:<Tag>未使用</Tag>}</div>
                            </List.Item>
                        )
                    }}
                />
                <EditAddressModal visible={v} setVisible={setV} ></EditAddressModal>
                <AddAddressModal visible={addv} setVisible={setAddV}></AddAddressModal>
                <Pagination
                    className={style.pagination}
                    current={page} defaultPageSize={10}
                    total={total} onChange={page => {
                        setPage(page);
                    }} />
            </div>
        </div>
    )
}
